<template>
	<view class="priview-box" :style="bgData.bgUrl=='' ? 'background-color:' + bgData.bgColor : 'background: url(' + bgData.bgUrl + ');'"  @click="curEditId = action.editActiveSetBg">
		<phoneSimuHead :titleTxt="titleTxt" @active="active"></phoneSimuHead>
		<view id="phoneListBox" class="middle-box phone-list">
			<view class="banner-box">
			<!-- 	@mouseenter.stop="onMouseEnter($event)" 
				@mouseleave.stop="onMouseLeave($event)" -->
				<image :src="bannerImg" 
					:id="action.mainBannerPic" 
					@click.stop="curEditId=action.mainBannerPic" 
					@load="onLoadBanner"></image>
				
				<view class="buy-tip-txt" :style="'opacity:' + (isShowBuyTip ? 1 : 0) + ';'" @click.stop="edit({act:action.mainBuyTipTxt,data:isShowBuyTip});curEditId = action.mainBuyTipTxt">XXX刚刚购买了XXX</view>
				<view class="buy-tip-txt-line" v-if="curEditId == action.mainBuyTipTxt"></view> 	
					
				<!-- @mouseenter.stop="onMouseEnter($event,3)" @mouseleave.stop="onMouseLeave($event,3)" -->
				<view class="parttake-txt-box" 
					:style="'opacity:'+(isShowPatake?1:0)+';color:' + parttakeData.txt.color + '; font-size : ' + parttakeData.txt.size + 'px; text-shadow:-1px 1px 0 '+ parttakeData.txt.borderCol + ', 1px 1px 0 '+parttakeData.txt.borderCol"
					@click.stop="curEditId=action.mainParttTxt" >
						<text class="patrt-txt"
							>已有
							<text class="part-num" 
							:style="'color:' + parttakeData.num.color + '; font-size : ' + parttakeData.num.size + 'px; text-shadow:-1px 1px 0 '+ parttakeData.num.borderCol + ', 1px 1px 0 ' + parttakeData.num.borderCol">{{partNum}}</text>
							人参与秒杀
						</text>
				</view>
				<view class="parttake-txt-line" 
					:style="'height:' + (30 + (parttakeData.num.size > parttakeData.txt.size ?(parttakeData.num.size - 10):(parttakeData.txt.size - 10))) +'px'" v-if="curEditId == action.mainParttTxt"></view>
				<view class="partt-txt-box"
					:style="'bottom:' + (44 + (parttakeData.num.size > parttakeData.txt.size ?(parttakeData.num.size - 10):(parttakeData.txt.size - 10))) +'px' "
					v-if="curEditId == action.mainParttTxt">
						<text class="st-txt" @click.stop="edit({act:action.mainParttStyle,data:parttakeData})">编辑样式</text>
						<text class="g-txt">|</text>
						<text class="st-txt" @click.stop="edit({act:action.mainParttTxt,data:isShowPatake})">编辑内容</text>
				</view>
				
				<view class="banner-box-line" v-if="curEditId == action.mainBannerPic"></view>
				<view class="banner-img-box" v-if="curEditId == action.mainBannerPic" @click.stop="edit({act:action.mainBannerPic,data:bannerImg})">
					<image class="edit-img" src="../../../static/images/edit-img-icon.png"></image>
				</view>
				<view class="banner-txt" v-if="curEditId == action.mainBannerPic" @click.stop="edit({act:action.mainBannerPic,data:bannerImg})">更换图片</view>
				
				<view class="active-direction" @click.stop="edit({act:action.editActiveDircs,data:{}}); curEditId = action.editActiveDircs">
					<!-- 活动说明 -->
					<text class="txt">活动说明</text>
					<view class="a-d-line" v-if="curEditId == action.editActiveDircs"></view>
				</view>
				
				<view class="active-direction contact-merchant" @click.stop="edit({act:action.editContactsMarch,data:{}}); curEditId = action.editContactsMarch">
					<!-- 活动说明 -->
					<text class="txt">联系商家</text>
					<view class="c-m-line" v-if="curEditId == action.editContactsMarch"></view>
				</view>
				
				<view class="music-btn-box logo-box" @click.stop="edit({act:action.editCpLogo,data:{}}); curEditId = action.editCpLogo">
					<image class="logo-img" :src="cpLogoData.cpLogoImg"></image>
					<view class="l-b-line" v-if="curEditId == action.editCpLogo"></view>
				</view>

				<view class="music-btn-box" @click.stop="edit({act:action.editMusicIcon,data:musicObj}); curEditId = action.editMusicIcon">
					<image class="music-btn-img logo-img-b-r" :src="musicSrcImgData.imgOnIcon"></image>
					<view class="m-b-line" v-if="curEditId == action.editMusicIcon"></view>
					<view class="banner-img-box edit-img-music" v-if="curEditId == action.editMusicIcon" @click.stop="edit({act:action.editMusicIcon,data:musicSrcImgData})">
						<image class="edit-img " src="../../../static/images/edit-img-icon.png"></image>
					</view>
				</view>
				
			</view>
			
			<view class="sessions-tab-box" 
			    @mouseover="onSessMouseOver()" @mouseout="onSessMouseOut()">
				<view class="s-t-box" :style="'left:' + leftAutonum + 'px; color:' + txt.color" :class="sessionsBarArr.length < 3 ? 'the-middle' : ''">
					<view class="tab-b-item"
						v-for="(item,index) in sessionsBarArr" 
						:key="index" 
						:style="curIndex == index ? ('color:'+ txt['color' + item.status] + ';border-bottom:' + txt['color' + item.status] + ' solid 2px;') : ''"
						@click.stop="clickTabBar(index)">
						<view class="t--t-txt">{{item.time_from_str}}</view>
						<view class="t-s-txt">{{item.statusTxt}}</view>
					</view>
				</view>
			</view>
		
			<view class="sessions-box" 
				v-for="(item,index) in sessionsBarArr" 
				:key="index" 
				:id="'sessId'+ item.sess_id" @click.stop="edit({act:action.mainEditGdList,data:{index:index}}); curEditId = action.mainEditGdList+index">
			<!-- 	@click.stop="edit(4)" 
				@mouseenter.stop="onMouseEnter($event,4)" 
				@mouseleave.stop="onMouseLeave($event,4)" -->
				
				<view class="session-time-box">
					<view class="sess-box">
						<view class="list-tit" :style="'color:'+ txt['color' + item.status]">{{item.time_from_str}}{{" " + item.statusTxt}}</view>
						<view class="a-time-box" v-if="item.status != 2" :style="item.status == 0 ? 'color:'+ txt.color0 +';' : 'color:'+txt.color1">
							<text class="a-t-txt" v-if="item.status == 0">距开始还有{{item.dd}}天</text>
							<text class="a-t-txt" v-if="item.status == 1">距结束还有{{item.dd}}天</text>
							<text class="t-hms-txt" :style="'border: '+ txt['color' + item.status] +' solid 1px;'">{{item.hh}}</text>
							<text class="t-txt-dd">:</text>
							<text class="t-hms-txt" :style="'border: '+ txt['color' + item.status] +' solid 1px;'">{{item.mm}}</text>
							<text class="t-txt-dd">:</text>
							<text class="t-hms-txt" :style="'border: '+ txt['color' + item.status] +' solid 1px;'">{{item.ss}}</text>
						</view>
					</view>
				</view>
				
				<view class="txt-style-box" @click.stop="popEditActSty()" v-if="curEditId == action.mainEditGdList+index" >编辑样式</view>
				
				<view class="gd-list-box" v-for="(gdItem,idx) in item.gd_list" :key="idx">
					<image class="gd-img" :src="gdItem.gd_img"></image>
					<view class="info-box">
						<view class="gd-info">
							<view class="g-tit-txt">{{gdItem.gdname}}</view>
							<view class="g-p-txt"><text class="cur-px">￥</text>{{gdItem.price}}</view>
							<view class="g-pc-txt">原价{{" ￥" + gdItem.price0}}</view>
						</view>
						<view class="gd-per-btn">
							<image class="btn-img" :src="buyBtn.imgBtn" v-if="item.status == 1"></image> 
							<view class="per-box">
								<view class="g-per-txt" :class="{'never-start':item.status == 0}  ">
									{{item.status == 0 ? "敬请期待" : ''}}
									{{item.status == 1 ? gdItem.r : ''}}
									{{item.status == 2 ? "已结束" : ''}}
								</view>
								<view class="g-per-box" v-if="item.status == 1">
									<view class="g-per-bar" :style="'width:'+gdItem.r_number+'%;background-color:'+ item.txtColor +';'"></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 编辑产品图片 -->
					<view class="e-img-box" v-if="curEditId == action.mainEditGdList+index">
						<image class="edit-img" src="../../../static/images/edit-img-icon.png" @click.stop="edit({act:action.editGdLsImg,data:{parentIdx:index}})"></image>
						<view class="gd-line" @click.stop="edit({act:action.editGdLsImg,data:{parentIdx:index}})"></view>
					</view>
					<!-- 移动产品 -->
					<view class="move-box" v-if="curEditId == action.mainEditGdList+index && item.gd_list.length > 1">
						<text class="st-txt" v-if="idx > 0" @click.stop="edit({act:action.editMoveUpGd,data:{parentIdx:index,index:idx,chpno:item.chpno}})">上移</text>
						<text class="g-txt" v-if="idx > 0 && idx < item.gd_list.length - 1">|</text>
						<text class="st-txt" v-if="idx < item.gd_list.length - 1" @click.stop="edit({act:action.editMoveDownGd,data:{parentIdx:index,index:idx,chpno:item.chpno}})">下移</text>
					</view>
					<!-- 编辑产品购买按钮 -->
					<view class="buy-b-box" v-if="curEditId == action.mainEditGdList+index">
						<image class="edit-img" src="../../../static/images/edit-img-icon.png" @click="edit({act:action.eidtBuyGdBtn,data:buyBtn})"></image>
						<view class="gd-line" @click.stop="edit({act:action.eidtBuyGdBtn,data:buyBtn})"></view>
					</view>
				</view>
			</view>
			
			<view class="follow-box">
				<view class="f-btn" :style="'color:'+follow.color+';background-color:'+follow.bgColor"
					@click.stop="curEditId = action.editFlowBtn">
					{{followBtnTxt}}
				</view>
				<view class="f-line" v-if="curEditId == action.editFlowBtn"></view>
				<view class="f-e-box" v-if="curEditId == action.editFlowBtn">
					<text class="st-txt" @click.stop="edit({act:action.editFlowBtnStyle,data:follow})">编辑样式</text>
					<text class="g-txt">|</text>
					<text class="st-txt" @click.stop="edit({act:action.editFlowBtnContext,data:follow})">编辑内容</text>
				</view>
			</view>
			
		</view>
		
		<view class="foot-box">
			<view class="tab-bar-box">
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/icon-home-page-s-1.png"></image>
					</view>
					<view class="t-b-t s-txt">
						<text>首页</text>
					</view>
				</view>
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/menu04.png"></image>
					</view>
					<view class="t-b-t">
						<text>订单</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主页背景，样式，虚线 -->
		<view class="main-box-line" v-if="curEditId == action.editActiveSetBg"></view>
		<view class="main-set-box" v-if="curEditId == action.editActiveSetBg">
			<text class="st-txt" @click.stop="edit({act:action.editActiveSet,data:musicObj})">活动设置</text>
			<text class="g-txt">|</text>
			<text class="st-txt" @click.stop="edit({act:action.editActiveBg,data:{bgData}})">编辑背景</text>
		</view>
		
		
		<interEdit ref="interEdit" @active="active"></interEdit>
		<!-- 设置背景音乐 -->
		<setActive ref="setActive" @setBgMuisc="setBgMuisc"></setActive>
		<!-- 设置页面背景 -->
		<editPageBackgroup ref="editPageBackgroup" @editBg="editBg"></editPageBackgroup>
		<!-- 设置banner广告 -->
		<uploadPic ref="uploadPic" @editAdBg="editAdBg"></uploadPic>
		<!-- 已有0人参与秒杀样式 -->
		<parttakeStyleTxt ref="parttakeStyleTxt" @editParttakSty="editParttakSty"></parttakeStyleTxt>
		<!-- 已有0人参与秒杀是否显示 -->
		<parttakeEditTxt ref="parttakeEditTxt" @parttEditShowHide="parttEditShowHide"></parttakeEditTxt>
		
		<!-- 上传更新产品 -->
		<uploadGdPic ref="uploadGdPic" @editGdsImg="editGdsImg"></uploadGdPic>
		
		<!-- 上传更新产品抢购按钮图片 -->
		<uploadBuyBtnPic ref="uploadBuyBtnPic" @editBuyGdsImg="editBuyGdsImg"></uploadBuyBtnPic>
		
		<!-- 音乐按钮编辑 -->
		<uploadMusicBtnPic  ref="uploadMusicBtnPic" @editMusicImgs="editMusicImgs"></uploadMusicBtnPic>
		
		<!-- 编辑关注按钮样式 -->
		<editFollowStyle  ref="editFollowStyle" @editFollowTxtBg="editFollowTxtBg"></editFollowStyle>
		
		<!-- 编辑字体样式 -->
		<editActFontStyle ref="editActFontStyle" @editTxtStyle="editTxtStyle"></editActFontStyle>
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	import interEdit from "./interact-edit.vue";

	import setActive from "./set-active.vue";
	import editPageBackgroup from "./eidt-page-backgroup.vue";
	import uploadPic from "./upload-pic.vue";

	import parttakeStyleTxt from "./parttake-style-txt.vue";
	import parttakeEditTxt from "./parttake-edit-txt.vue";
	
	import editInteractive from "@/js/inieractive/EditInteractive.js";
	
	import uploadGdPic from "./upload-gd-pic.vue";
	
	import uploadBuyBtnPic from './upload-buy-btn-pic.vue';
	
	import uploadMusicBtnPic from './upload-music-btn-pic.vue';
	
	import editFollowStyle from './eidt-follow-style.vue';
	
	import editActFontStyle from "./eidt-active-font-style.vue";
	
	let timeout = null;
	let timer = null;
	export default {
		props: [],
		components: {   phoneSimuHead, 
						interEdit,
						setActive,
						editPageBackgroup,
						uploadPic,
						parttakeStyleTxt,
						parttakeEditTxt,
						uploadGdPic,
						uploadBuyBtnPic,
						uploadMusicBtnPic,
						editFollowStyle,
						editActFontStyle,
					},
		computed: {},
		data() {
			return {
				action:editInteractive.action,
				
				curEditId:"",
				
				barTimeTxt:"",
				
				partNum:15,
				
				titleTxt:"",//标题
				bannerImg:"",
				
				followBtnTxt:"",
				//背景
				bgData: {
					bgColor: "#DFDFDF", //背景颜色
					bgUrl: "", //绝对路径
					baseUrl: "", //相对路径
				},
				
				//活动字体颜色
				txt: {
					color : "#999", //滚动字体颜色
				    color0: "#FF6600", //活动未开始字体颜色
				    color1: "#F04848", //活动进行中字体颜色
				    color2: "#AAA", //活动已结束字体颜色
				},
				
				//背景音乐
				musicSrcImgData: {
					imgOnIcon:"https://cdn.imiyun.com/d/bases/hd/defaut_btns/open-music.png", //C端b播放音乐状态图片
					baseImgOnIcon: "d/bases/hd/defaut_btns/open-music.png",
					imgImgOffIcon:"https://cdn.imiyun.com/d/bases/hd/defaut_btns/close-music-1.png", //C端关闭音乐状态图片
					baseImgOffIcon: "d/bases/hd/defaut_btns/close-music-1.png",
					left: 0, //x坐标
					top: 0, //y坐标
				},
				
				musicObj:
				{
					ismusic:"2",
					music_url:"",
				},
				
				cpLogoData:{
					cpLogoImg:"https://pc.imiyun.com/static/images/logo.png",
					left:0,
					top:0,
				},
				isShowBuyTip:true,//是否显示  ‘XXX刚刚购买了XXX’
				isShowPatake:true,//是否显示 ‘已有0人参与秒杀’
				parttakeData: //参与人数文字
				{
					txt:{ //文本样式
						color:"#F04848",//文字颜色
						size:12,//字体大小
						borderCol:"#FFF",
					},
					num:
					{
						color:"#3388FF",//文字颜色
						size:12,//字体大小
						borderCol:"#FFF",
					}
				},
				
				// 关注我们
				follow: {
					color: "#FFF", //字体颜色
					bgColor: "#3388FF", //背景颜色
				},
				
		
				//抢购按钮
				buyBtn: {
					imgBtn: "https://cdn.imiyun.com/d/bases/hd/defaut_btns/buy-btn-s.png", //绝对路径
					baseImgBtn: "d/bases/hd/defaut_btns/buy-btn-s.png", //相对路径
					imgFinishBtn:"https://cdn.imiyun.com/d/bases/hd/defaut_btns/buy-btn-over.png", //绝对路径
					baseImgFinishBtn:"d/bases/hd/defaut_btns/buy-btn-over.png", //相对路径
				},
				
				sessionsBarArr:[],
				curIndex:0,
				curGd:{},
				
				bannerHeight:0,
				
				isMoseOver:false,
				mouseEnterId:"",
				
				mouseEnterTime:0,
				
				base:125,
				leftAutonum: 0,
				isStopLeftNum:true,
				speed: 100, //产品左右滚动的速度（毫秒）
				isWait:true,
				waitNum:0,
				
				cpid:"",
				idyun:"",
				hdid:"",
			};
		},
		created() {},
		mounted() {
			
		},
		methods: {
			update(data)
			{
				let act = this.action;
				if(data.act == act.editCpLogo) //企业logo上传完成更新
				{
					this.cpLogoData.cpLogoImg = data.data;
				}
				if(data.act == act.editGoodsTitle)
				{
					this.sessionsBarArr.forEach((s)=>{
						s.gd_list.forEach((c)=>{
							if(data.data.id == c.goods_id)
							{
								c.gdname = data.data.gd_name;
							}
						})
					});
				}
				if(data.act == act.editFlowBtnContext)
				{
					this.followBtnTxt = data.data;
				}
				if(data.act == act.Ids) //公司id，云店id，活动id
				{
					this.idyun = data.data.idyun;
					this.cpid = data.data.cpid;
					this.hdid = data.data.hdid;
				}
				
				// if(data.act == act.creatorActive)
				// {
				// 	console.log("data===advertSement:===:",data)
				// 	this.sessionsBarArr = [];
				// 	let temp = {};
				// 	temp.gd_list = data.data.gd_ls;
				// 	this.sessionsBarArr.push(temp)
				// }
				
				this.$forceUpdate();
			},
			
			updateSkin(data)
			{
				this.parttakeData = data.parttakeData;
				this.activeDesc = data.activeDesc;
				this.bgData = data.bgData;
				this.cpLogoData = data.cpLogoData;
				this.follow = data.follow;
				this.musicSrcImgData = data.musicSrcImgData;
				this.txt = data.txt;
				console.log("data===updateSkin(data):====:",data);
			},
			
			onSessMouseOver()
			{
				this.isStopLeftNum = false;
			},
			
			onSessMouseOut()
			{
				this.isStopLeftNum = true;
			},
			
			// 产品自动滚动
			sollAutoFun(){
				this.$nextTick(()=>{
					timer = setInterval(()=>{
						if(this.isStopLeftNum )
						{
							if(!this.isWait)
							{
								this.leftAutonum -= 3;
								let num = this.leftAutonum;
								let templeft = this.sessionsBarArr.length * this.base - this.base * 3;
								if(num <= -templeft)
								{
									this.isWait = true;
								}
							}
							else
							{
								this.waitNum ++;
								if(this.waitNum >= 30) //等待3秒
								{
									this.isWait = false;
									this.leftAutonum = 0;
									this.waitNum = 0
								}
							}
						}
					},this.speed)
				})
			},
			
			init()
			{
				let now = new Date();
				this.barTimeTxt = String(now.getHours()) + ":" + String(now.getMinutes());
				this.curGd = this.sessionsBarArr[this.curIndex];
				
				if(document.querySelector("#phoneListBox"))
					document.querySelector("#phoneListBox").addEventListener("scroll",this.handlerScroll,true);
				
				uni.$on('interaction_data',(data)=>{
					this.initData(data);
				});
				if(this.sessionsBarArr.length > 3 && !timer)
				{
					this.leftAutonum = 0;
					this.sollAutoFun();
				}
				uni.$on('init_active_title',(data)=>{
					
					this.titleTxt = data;
				});
			},
			
			initData(data)
			{
				if(data.hd_info)
				{
					this.titleTxt = data.hd_info.title;
				}
				if(data.chp_ls)
				{
					this.sessionsBarArr = data.chp_ls;
					this.sessionsBarArr.forEach(s=>{
						
						s.dd = Math.floor(s.left_time / (3600*24));
						let hh = Math.floor((s.left_time % (3600*24)) / 3600);
						s.hh = hh > 9 ? hh : "0" + hh; 
						let mm = Math.floor((s.left_time - s.dd * 3600 * 24 - s.hh * 3600) / 60);
						s.mm =  mm > 9 ? mm : "0" + mm; 
						let ss = s.left_time % 60
						s.ss = ss > 9 ? ss : "0" + ss; 
						
						if(s.status == 1)
							s.txtColor = "#F04848";
						if(s.gd_list)
						{
							s.gd_list.forEach(c=>{
								if(c.img_url)
								{
									c.gd_img = c.img_url[0];
									if(s.status == 1)
									{
										c.btn_img = this.buyBtn.imgBtn;
										if(s.r_number==100)
											c.btn_img = this.buyBtn.imgFinishBtn;
									}
								}
							})
						}
					})
				}
				if(data.hd_set)
				{
					// if(data.hd_set.set_skin)
					// {
					// 	let skin = data.hd_set.set_skin;
					// 	this.bgData = skin.homePage.bgData;
					// 	this.buyBtn = skin.homePage.buyBtn;
					// 	this.cpLogoData = skin.homePage.cpLogoData;
					// 	this.follow = skin.homePage.follow;
					// 	this.musicSrcImgData = skin.homePage.musicSrcImgData;
					// 	this.txt = skin.homePage.txt;
					// 	this.parttakeData = skin.homePage.parttakeData;
					// }
					this.cpLogoData.cpLogoImg = data.hd_set.logo_url;
					this.musicObj.ismusic = data.hd_set.ismusic;
					this.musicObj.music_url = data.hd_set.music_url;
					this.musicObj.music_url_short = data.hd_set.music_url_short;
					this.musicObj.music_url_default = data.hd_set.music_url_default;
					this.isShowBuyTip = data.hd_set.isshow_od == "1" ? true : false;
					this.isShowPatake = data.hd_set.isshow_od == "1" ? true : false;
				}
				
				if(data.hd_info)
				{
					this.bannerImg = data.hd_info.img_url;
					let bObj = {};
					bObj.act = this.action.mainBannerPic;
					bObj.data = {};
					bObj.data.baseUrl =  data.hd_info.img;
					editInteractive.eidt(bObj); //更新到数据模型
				}
				
				
				
				this.init();
			},
			
			/***滚动的时候隐藏***/
			handlerScroll()
			{
				this.$nextTick(()=>
				{
					this.$refs.interEdit.srollHideWin();
				});
			},
			
			clickTabBar(index)
			{
				this.curIndex = index;
				this.curGd = this.sessionsBarArr[this.curIndex];
				this.curEditId = "";
			},
			
			edit(value)
			{
				let act = this.action
				if(value.act == act.editActiveTitle)//活动标题
				{
					editInteractive.eidt(value);
				}
				else if(value.act == act.editActiveBg)//设置背景颜色，或者平铺背景
				{
					this.$refs.editPageBackgroup.showWin(value.data);
				}
				else if(value.act == act.editActiveSet)//活动设置音乐
				{
					this.$refs.setActive.showSetWin(value);
				}
				else if(value.act == act.mainBannerPic)//编辑广告图
				{
					this.$refs.uploadPic.showWin(value);
				}
				else if(value.act == act.mainParttStyle)//参与人数样式,
				{
					this.$refs.parttakeStyleTxt.showWin(value.data);
				}
				else if(value.act == act.mainParttTxt || value.act == act.mainBuyTipTxt)//参与人数内容，（修改数字）|| XXX刚刚购买了XXX
				{
					this.$refs.parttakeEditTxt.showWin(value);
				}
				else if(value.act == act.mainEditGdList + value.data.index) //编辑某个场次的产品
				{
					editInteractive.eidt(value);
				}
				else if(value.act == act.editGdLsImg) //编辑产品图片
				{
					let data= value.data;
					let pIndex = data.parentIdx;
					let temp = this.sessionsBarArr[pIndex].gd_list;
					let obj = {act:value.act, pIndex:data.parentIdx,list:temp};
					
					this.$refs.uploadGdPic.showWin(obj);
				}
				else if(value.act == act.editMoveUpGd || value.act == act.editMoveDownGd)//上移产品列表
				{
					let data= value.data;
					let pIndex = data.parentIdx;
					let idx = data.index;
					let tempIdx = idx-1;
					if(value.act == act.editMoveDownGd)
						tempIdx = idx+1;
					let temp = this.sessionsBarArr[pIndex].gd_list[idx];
					this.sessionsBarArr[pIndex].gd_list[idx] = this.sessionsBarArr[pIndex].gd_list[tempIdx];
					this.sessionsBarArr[pIndex].gd_list[tempIdx] = temp;
					editInteractive.eidt(value);
					this.$forceUpdate();
				}
				else if(value.act == act.eidtBuyGdBtn)//xiu gai shang pin gou wu an
				{
					this.$refs.uploadBuyBtnPic.showWin(value);
				}
				else if(value.act == act.editMusicIcon)//音乐按钮上传，
				{
					this.$refs.uploadMusicBtnPic.showWin({act:act.editMusicIcon,data:this.musicSrcImgData});
				}
				else if(value.act == act.editCpLogo)//编辑企业logo 
				{
					editInteractive.eidt(value);
				}
				else if(value.act == act.editActiveDircs)//编辑活动说明
				{
					editInteractive.eidt(value);
				}
				else if(value.act == act.editContactsMarch)//编辑接联系商家
				{
					editInteractive.eidt(value);
				}
				else if(value.act == act.editFlowBtnStyle)
				{
					this.$refs.editFollowStyle.showWin(value);
				}
				else if(value.act == act.editFlowBtnContext)
				{
					editInteractive.eidt(value);
				}
			},
			
			setBgMuisc(data)
			{
				this.musicObj.ismusic = data.data.ismusic;
				this.musicObj.music_url = data.data.music_url;
				editInteractive.eidt(data);
			},
			
			/*******广告图片上传*********/
			editAdBg(data)
			{
				// data.data.baseUrl
				let obj = {};
				obj.act = data.act;
				obj.data = data;
				if(data.act == this.action.mainBannerPic)
				{
					this.bannerImg = data.url;
				}
				else if( data.act == this.action.editCpLogo)
				{
					this.cpLogoData.cpLogoImg = data.url;
				}
				editInteractive.eidt(obj);
				this.curEditId = "";
			},
			
			// 防抖
			testFun(fun, value,time = 500) {
				if (timeout) {
					clearTimeout(timeout); // 规定时间内若定时器存在则清除
				}
				timeout = setTimeout(() => {
					fun(value); // 调用接口
				}, time);
			},
			
					
			onMouseEnter(event,value) 
			{
				// console.log("onMouseLeave(event,value):鼠标移入===：",event);
				// this.testFun(this.showLineBox,value);
			},
			
			showLineBox(value)
			{
				let data = {};
				data.id = value;
				data.show = true;
				if(value == 2 || value ==3)
					data.banHeight = this.bannerHeight;
				this.$refs.interEdit.showDasheBox(data);
			},
			
			onMouseLeave(event,value)
			{
				// console.log("onMouseLeave(event,value):鼠标移出===：",event.currentTarget);
				// let data = {};
				// data.id = value;
				// data.show = false;
				// this.$refs.interEdit.showDasheBox(data);
			},
			
			onLoadBanner(e)
			{
				let query = uni.createSelectorQuery().in(this);
				query.select('.banner-box').boundingClientRect(data => {
					if(data)
					{
						this.bannerHeight = data.height;
					}
				}).exec();
			},
			
			active(act)
			{
				this.curEditId = act;
			},
			
			/****编辑背景*****/
			editBg(data)
			{
				this.bgData.bgColor = data.bgColor;
				this.bgData.bgUrl = data.bgUrl;
				this.bgData.baseUrl = data.baseUrl;
				let obj = {};
				obj.act = this.action.editActiveBg;
				obj.data = data;
				editInteractive.eidt(obj);
				this.curEditId = "";
			},
			
			editParttakSty(data)
			{
				console.log(this.action.mainParttStyle,'mainParttStylemainParttStylemainParttStyle')
				this.parttakeData = data;
				let obj = {};
				obj.act = this.action.mainParttStyle;
				obj.data = data;
				editInteractive.eidt(obj);
				this.curEditId = "";
			},
			
			parttEditShowHide(data)
			{
				let obj = {};
				obj.act = data.act;
				obj.data = data.data;
				if(data.act == this.action.mainParttTxt) // 已有0人参与秒杀
				{
					this.isShowPatake = data.data;
				}
				else if(data.act == this.action.mainBuyTipTxt)//XXX刚刚购买了XXX
				{
					this.isShowBuyTip = data.data;
				}
				editInteractive.eidt(obj);
				this.curEditId = "";
			},
			
			//<!-- 上传更新产品 -->
			editGdsImg(data)
			{
				console.log("data===editGdsImg():===:",data);
				console.log(this.sessionsBarArr[data.pIndex]);
				this.sessionsBarArr[data.pIndex].gd_list[data.index].gd_img = data.url;
				editInteractive.eidt(data);
				this.$forceUpdate();
			},
			
			editBuyGdsImg(data)
			{
				this.buyBtn = data.data;
				editInteractive.eidt(data);
				this.$forceUpdate();
			},
			
			// 编辑音乐按钮
			editMusicImgs(data)
			{
				if(data.data.type == 1)///打开音乐按钮
				{
					this.musicSrcImgData.imgOnIcon = data.data.imgOnIcon;
					this.musicSrcImgData.baseImgOnIcon = data.data.baseImgOnIcon;
				}
				else if(data.data.type == 2)//关闭音乐按钮
				{
					this.musicSrcImgData.imgImgOffIcon = data.data.imgImgOffIcon
					this.musicSrcImgData.baseImgOffIcon = data.data.baseImgOffIcon 
				}
				let obj = {};
				obj.act = data.act;
				obj.data = this.musicSrcImgData;
				editInteractive.eidt(obj);
			},
			
			//编辑关注按钮样式
			editFollowTxtBg(data)
			{
				this.follow.bgColor = data.data.bgColor;
				this.follow.color = data.data.color;
				editInteractive.eidt(data);
			},
			
			//打开编辑字体样式窗口
			popEditActSty()
			{
				this.$refs.editActFontStyle.showWin(this.txt);
			},
			
			//编辑字体样式
			editTxtStyle(data)
			{
				this.txt = data;
				let obj = {};
				obj.act = this.action.editActiveTxtSty;
				obj.data = data;
				editInteractive.eidt(obj);
			},
		},
	};
</script>

<style lang="scss" scoped >
.priview-box {
    width: 100%;
    height: 100%;
	overflow: hidden;
	position: relative;
	background-size: contain;
	background-repeat: repeat-y;
	.statuts-bar-box
	{
		height: 176upx;
		width: 100%;
		background-color: #FFF;
		position: relative;
		// .feet-box{
		// 	position: absolute;
		// 	width: 420upx;
		// 	height: 64upx;
		// 	left: 0; 
		// 	top: 0; 
		// 	right: 0; 
		// 	bottom: 0;
		// 	margin: 0 auto;
		// 	border-bottom-left-radius: 30upx;
		// 	border-bottom-right-radius: 30upx;
		// 	background-color: #000;
		// }
		cursor: pointer;
		.s-b-b
		{
			display: flex;
			justify-content: space-between;
			padding: 38upx 20upx;
			.time-txt
			{
				
			}
			.pw-per-box
			{
				color: #AAA;
				display: flex;
				align-items: center;
				view
				{
					padding-right: 10upx;
				}
				image
				{
					width: 52upx;
					height: 20upx;
				}
			}
		}
		.tit-txt
		{
			text-align: center;
			cursor: pointer;
		}
	}
	
	.middle-box
	{
		width: 100%;
		// background-color: #FFF;
		height:calc(100% - 300upx) ;
		.banner-box
		{
			width: 100%;
			position: relative;
			height: 480upx;
			image
			{
				cursor: pointer;
				width: 100%;
				height: 100%;
			}
			
			.banner-box-line
			{
				width: calc(100% - 4upx); //100%;
				height: 100%;
				border: 1px #000 dashed;
				position: absolute;
				top: 0;
				left: 0;
				pointer-events: none;
				z-index: 1000;
			}
			
			.banner-img-box
			{
				position: absolute;
				top: 5px;
				left: 5px;
				width:40px;
				height: 40px;
				z-index: 1000;
				.edit-img
				{
					width:40px;
					height: 40px;
				}
	
			}
			.edit-img-music {
				top: -8px;
				left: 47px;
			}
			.banner-txt
			{
				background-color: #000;
				color: #FFF;
				position: absolute;
				left: 5px;
				top: 50px;
				text-align: center;
				border-radius: 4px;
				padding: 1px 8px;
				cursor: pointer;
				z-index: 1000
			}
			
			.buy-tip-txt
			{
				position: absolute;
				cursor: pointer;
				background-color: #FFF;
				color: #FF6600;
				padding: 2upx 20upx;
				border-radius: 30upx;
				bottom: 140upx;
				left: 20upx;
			}
			
			.buy-tip-txt-line
			{
				width: calc(100% - 10px); //100%;
				height: 30px;
				border: 1px #000 dashed;
				position: absolute;
				bottom:65px;
				left: 0;
				right: 0;
				margin: auto;
				pointer-events: none;
			}
			
			
			.parttake-txt-box
			{
				position: absolute;
				opacity: 1;
				cursor: pointer;
				bottom: 15px;
				width: 100%;
				text-align: center;
				margin: 0 auto;
				 
				.patrt-txt
				{
					.part-num
					{
						
					}
				}
			}
			
			.parttake-txt-line
			{
				width: calc(100% - 10px); //100%;
				height: 30px;
				border: 1px #000 dashed;
				position: absolute;
				bottom:10px;
				left: 0;
				right: 0;
				margin: auto;
				pointer-events: none;
			}
			.partt-txt-box
			{
				position: absolute;
				bottom:44px;
				right: 10px;
				background-color: #000;
				color: #FFF;
				padding: 2px 10px;
				border-radius: 4px;
			}
			
			.music-btn-box
			{
				position: absolute;
				width: 66upx;
				height: 66upx;
				top:10px;
				left: 9px;
				z-index: 999;
				cursor: pointer;
				.music-btn-img,.logo-img
				{
					width: 100%;
					height: 100%;
					transform: scale(.9);
					border-radius: 80upx;
				}
				
				.logo-img-b-r
				{
					border-radius: 0 !important;
				}
				
				.m-b-line
				{
					border: 1px #000 dashed;
					height: 104upx;
					width: 104upx;
					position: absolute;
					top: -14upx;
					left:-14upx;
					pointer-events: none;
				}
			}
			
			.logo-box	
			{
				top:60px;
				width: 96upx;
				height: 96upx;
				left: 5px;
				cursor: pointer;
				.l-b-line
				{
					border: 1px #000 dashed;
					height: 104upx;
					width: 104upx;
					position: absolute;
					top: -8upx;
					right: -6upx;
					pointer-events: none;
				}
			}
	
			.active-direction
			{
				right: 20upx;
				top: 30upx;
				height: 46upx;
				width: 46upx;
				background-color: #FFF;
				position: absolute;
				text-align: center;
				color: #FF6600;
				padding: 20upx 20upx;
				border-radius: 56upx;
				cursor: pointer;
				.txt
				{
					position: absolute;
					top:14upx;
					left: 14upx;
					width: 60upx;
					line-height: 30upx;
				}
				.a-d-line,.c-m-line
				{
					border: 1px #000 dashed;
					height: 104upx;
					width: 104upx;
					position: absolute;
					top: -14upx;
					right: -10upx;
					z-index: 999;
					pointer-events: none;
				}
			}
			
			
			.contact-merchant
			{
				top: 130upx;
				color: #3388FF;
			}
		}
		
		.sessions-tab-box
		{
			background-color: #FFF;
			border-bottom: 1upx solid #EEE;
			overflow: hidden;
			position: relative;
			height: 130upx;
			padding: 0 20upx;
			.s-t-box
			{
				display: flex;
				position: absolute;
				padding: 20upx ;
				&.the-middle{
					width: 100%;
					display: flex;
					justify-content: space-around;
					.good-row{
						&:last-child{
							margin: 0;
						}
					}
				}
				.tab-b-item
				{
					margin: 0 30upx;
					text-align: center;
					// color: #aaa;
					width: 180upx;
					cursor: pointer;
				}
				// .cur-tab-b-item-1
				// {
				// 	color: #f04848;
				// 	border-bottom: #f04848 solid 4upx;
				// }
				// .cur-tab-b-item-2
				// {
				// 	color: #AAA;
				// 	border-bottom: #AAA solid 4upx;
				// }
				// .cur-tab-b-item-0
				// {
				// 	color: #FF6600;
				// 	border-bottom: #FF6600 solid 4upx;
				// }
			}
		}
		
		.sessions-box
		{
			margin: 20upx 0;
			border-top: 1upx solid #EEE;
			position: relative;
			.txt-style-box
			{
				padding: 4upx 20upx;
				position: absolute;
				right: 20upx;
				top: -20upx;
				border-radius: 8upx;
				color:#FFF;
				background-color: #000;
				cursor: pointer;
			}
			
			.sess-box
			{
				border-bottom: 1upx solid #EEE;
				background-color: #FFF;
				cursor: pointer;
				.list-tit
				{
					font-size: 36upx;
					font-weight: bold;
					text-align: center;
					color: #f04848;
					height: 80upx;
					line-height: 80upx;
				}
				.a-time-box
				{
					font-size: 32upx;
					height: 70upx;
					line-height: 70upx;
					color: #f04848;
					text-align: center;
					padding: 0 0 10px 0;
					.a-t-txt,.t-txt-dd
					{
						padding: 0 10upx;
					}
					.t-hms-txt
					{
						padding: 10upx 10upx;
						border-radius: 6upx;
					}
				}
			}

			.gd-list-box
			{
				display: flex;
				padding: 20upx 20upx;
				background: #FFF;
				border-bottom: 1upx solid #EEE;
				cursor: pointer;
				position: relative;
				.e-img-box
				{
					position: absolute;
					top: -30px;
					left: 10px;
					width:40px;
					height: 40px;
					.edit-img
					{
						width:40px;
						height: 40px;
					}
					.gd-line
					{
						position: absolute;
						height: 92px;
						width: 92px;
						border: 1px #000 dashed;
						top:39px;
						left: -1px;
					}
					
				}
				.move-box
				{
					position: absolute;
					top:-26px;
					right: 10px;
					background-color: #000;
					color: #FFF;
					padding: 2px 10px;
					border-radius: 4px;
				}
				
				.buy-b-box
				{
					position: absolute;
					position: absolute;
					top: 3px;
					right: 10px;
					width:40px;
					height: 40px;
					.edit-img
					{
						width:40px;
						height: 40px;
					}
					.gd-line
					{
						position: absolute;
						height: 35px;
						width: 75px;
						border: 1px #000 dashed;
						top:43px;
						border-radius: 4px;
						right:0;
					}
				}
				
				
				.gd-img
				{
					min-width: 184upx;
					height: 184upx;
					width: 184upx;
					border-radius: 6upx;
				}
				.info-box
				{
					width: calc(100% - 204upx);
					padding-left: 20upx;
					display: flex;
					justify-content: space-between;
					position: relative;
					.gd-info
					{
						width: 100%;
						.g-tit-txt
						{
							font-size: 40upx;
							width:100%;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap;
						}
						.g-p-txt
						{
							font-size: 36upx;
							color:#f04848;
							font-weight: bold;
							.cur-px
							{
								font-size: 24upx;
							}
						}
						.g-pc-txt
						{
							text-decoration: line-through;
							color: #AAA;
						}
					}
					
					.gd-per-btn
					{
						position: absolute;
						right: 0;
						bottom: 0;
						.btn-img
						{
							position: absolute;
							right: 0;
							bottom: 40upx;
							height: 72upx;
							width: 152upx;
						}
						.per-box
						{
							display: flex;
							justify-content: center;
							align-items: center;
							color: #AAA;
							.g-per-txt{
								padding-right: 20upx;
							}
							
							.never-start
							{
								color: #FF6600;
							}
							
							.g-per-box
							{
								width: 152upx;
								height: 16upx;
								background-color: #EEE;
								.g-per-bar
								{
									height: 100%;
								}
							}
						}
					}
				}
			}
			
			// .gd-item:hover
			// {
			// 	border: 1px #000 dashed;
			// }
		}
		
		.follow-box
		{
			margin: 20upx;
			position: relative;
			.f-btn
			{
				font-size: 36upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-radius: 50upx;
				margin: 0 100upx;
			}
		}
		.f-line
		{
			border: 1upx #000 dashed;
			height: 80upx;
			margin: 0 100upx;
			border-radius: 50upx;
			position: absolute;
			width: 254px;
			top: -1px;
		}
		.f-e-box
		{
			background-color: #000;
			border-radius: 8upx;
			color: #FFF;
			padding: 2upx 20upx;
			width: 240upx;
			position: absolute;
			right: 70px;
			top:-25px;
		}
	}
	
	.g-txt
	{
		padding: 0 10px;
	}
	
	.st-txt
	{
		cursor: pointer;
	}
	
	
	.foot-box
	{
		height: 120upx;
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: #FFF;
		border-top: 1upx solid #eee;
		.tab-bar-box
		{
			height: 100upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			
			.tab-b
			{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				.t-b-i
				{
					height: 60upx;
					width: 60upx;
					position: relative;
					image
					{
						height: 100%;
						width: 100%;
					}
				}
				.t-b-t
				{
					height: 24upx;
					color: #666;
				}
				.s-txt
				{
					color: #3388FF;
				}
			}
		}
	}
	
	.main-box-line
	{
		width: calc(100% - 2px);
		position: absolute;
		top: 88px;
		height: calc(100% - 150px);
		pointer-events: none;
		border: 1px dashed #000;
	}
	
	.main-set-box
	{
		position: absolute;
		top:60px;
		right: 10px;
		background-color: #000;
		color: #FFF;
		padding: 2px 10px;
		border-radius: 4px;
	}
}
</style>
